<template>
  <div class="home">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="人员名称" prop="userName">
        <el-input v-model="queryParams.userName" placeholder="请输入人员名称" clearable size="small" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-card>
      <div>
        <el-button type="success" size="small" @click="openunitDialog">新增人员</el-button>
        <el-button type="primary" size="small" @click="refresh">刷新</el-button>
      </div>

      <el-table :data="tableData" border style="width: 100%" class="elTable">
        <el-table-column type="index" label="序号" width="100" align="center" />
        <el-table-column prop="userType" label="用户权限" align="center">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.userType" :key="index">
              <span v-if="item == '0'"> 普通权限</span>
              <span v-if="item == '1'"> 车辆权限</span>
              <span v-if="item == '2'"> 加油卡权限</span>
              <span v-if="item == '3'"> 领导权限</span>
              <span v-if="item == '4'"> 司机权限</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="userCode" label="用户编码" align="center" />

        <el-table-column prop="userName" label="用户名称" align="center" />

        <!-- <el-projectTable-column prop="isLeader" label="是否领导" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isLeader == 'Y'">是</span>
            <span v-if="scope.row.isLeader == 'N'">不是</span>
          </template>
        </el-projectTable-column> -->

        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column prop="account" label="账号" align="center" />

        <el-table-column prop="isFirstPwd" label="是否初始密码" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isFirstPwd == 'Y'">是</span>
            <span v-if="scope.row.isFirstPwd == 'N'">不是</span>
          </template>
        </el-table-column>

        <!-- <el-projectTable-column prop="autograph" label="签名照片" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.autograph" alt="" style="width: 100px" />
          </template>
        </el-projectTable-column> -->

        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="resetPwd(scope.row)">重置密码</el-button>
            <el-button type="info" size="small" @click="editUnit(scope.row)">修改</el-button>
            <el-button type="danger" size="small" @click="delunit(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getList" />
    </el-card>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :modal="false">
      <el-form ref="form" :model="petrol" :rules="rules">
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="petrol.userName" />
        </el-form-item>
        <el-form-item label="用户权限" prop="userType">
          <el-checkbox-group v-model="petrol.userType" @change="changeUserType">
            <el-checkbox label="0">申请权限</el-checkbox>
            <el-checkbox label="1">车辆权限</el-checkbox>
            <el-checkbox label="2">加油卡权限</el-checkbox>
            <el-checkbox label="3">领导权限</el-checkbox>
            <el-checkbox label="4">司机权限</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!-- <el-form-item label="是否领导" prop="isLeader">
          <el-radio-group v-model="petrol.isLeader">
            <el-radio label="Y">是</el-radio>
            <el-radio label="N">不是</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="petrol.phone" />
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input v-model="petrol.account" />
        </el-form-item>

        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addunit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { queryUserPage, insertUser, updateUser, deleteUser, updateAgainPwd } from '@/api/unit/user';
export default {
  props: {
    dept: {
      type: Object,
      required: true
    },
    info: {
      type: Object,

      required: true
    }
  },
  data() {
    return {
      pageIndex: 1,
      pageSize: 10,
      tableData: [],
      dialogVisible: false,
      total: 0,
      petrol: {
        userType: []
      },
      dialogTitle: '',
      queryParams: {
        userName: ''
      },
      rules: {
        userName: [{ required: true, phone: '请输入卡号', trigger: 'blur' }],
        userType: [{ type: 'array', required: true, message: '请至少选择一个权限', trigger: 'change' }],
        parentCode: [{ required: true, phone: '请选择主卡', trigger: 'blur' }],
        isLeader: [{ required: true, phone: '请选择使用状态', trigger: 'change' }],
        phone: [{ required: true, phone: '请输入其他信息', trigger: 'blur' }],
        account: [{ required: true, phone: '请输入其他信息', trigger: 'blur' }]
      },
      options: []
    };
  },
  created() {
    this.getList();
    console.log(this.dept, this.info);
  },
  mounted() {},
  methods: {
    changeUserType(e) {
      console.log(this.petrol.userType);
    },
    resetPwd(val) {
      this.$confirm('此操作将重置该用户密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await updateAgainPwd({ id: val.id });
          if (res.code === '200') {
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
    },
    refresh() {
      this.$refs.queryForm.resetFields();
      this.pageIndex = 1;
      this.getList();
    },
    async getList() {
      const { object } = await queryUserPage({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        companyCode: this.dept.companyCode,
        deptCode: this.info.deptCode,
        userName: this.queryParams.userName
      });
      this.tableData = object.data;
      this.total = object.count;
    },

    async openunitDialog() {
      this.dialogTitle = '新增人员';
      this.petrol = {
        userType: []
      };
      this.petrol.companyCode = this.dept.companyCode;
      this.petrol.companyName = this.dept.companyName;
      this.petrol.deptCode = this.info.deptCode;
      this.petrol.deptName = this.info.deptName;
      this.dialogVisible = true;
    },
    editUnit(val) {
      this.dialogTitle = '修改人员';
      this.petrol = JSON.parse(JSON.stringify(val));
      this.petrol.userType = this.petrol.userType.split(',');
      this.dialogVisible = true;
    },

    delunit(val) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await deleteUser({ id: val.id });
          if (res.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList();
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    addunit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let obj = JSON.parse(JSON.stringify(this.petrol));
          obj.userType = obj.userType.join(',');
          if (!this.petrol.id) {
            const res = await insertUser(obj);
            if (res.code === '200') {
              this.dialogVisible = false;
              this.getList();
              this.$message({
                type: 'success',
                message: res.message
              });
            }
          } else {
            const res = await updateUser({
              id: obj.id,
              userType: obj.userType,
              userName: obj.userName,
              isLeader: obj.isLeader,
              phone: obj.phone,
              account: obj.account
            });
            if (res.code === '200') {
              this.dialogVisible = false;
              this.getList();
              this.$message({
                type: 'success',
                message: res.message
              });
            }
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="scss"></style>
